<template>
  <view class="main">
    <action-bar :options="navOptions"></action-bar>

    <view class="main-content" v-if="show">
      <uni-section title="报告基础信息" type="line">
        <view class="item" v-for="(item, index) in foundInfo" :key="index">
          <view class="item-left">{{ item.name }}: </view>
          <view class="item-right">{{ dataInfo[item.value] || "暂无" }}</view>
        </view>
      </uni-section>

      <uni-section title="新增报告备案" type="line">
        <uni-collapse ref="collapse" v-model="value" @change="change">
          <uni-collapse-item title="项目总表">
            <view class="content">
              <uni-section title="服务对象" type="circle">
                <view class="content-box" v-for="(item, index) in serviceList" :key="index">
                  <span>{{ item.name }}:</span>
                  <span class="value">{{
                    projectServiceInfo[item.value] || null
                  }}</span>
                </view>
              </uni-section>
            </view>
            <view class="content">
              <uni-section title="维护保养结论" type="circle">
                <view class="content-box" v-for="(item, index) in conclusionList" :key="index">
                  <span>{{ item.name }}:</span>
                  <span class="value" v-if="!item.isFound">{{
                    projectInfo[item.value] || "暂无"
                  }}</span>
                  <span class="value" v-else>
                    {{ conclusionServiceInfo[item.value] }}
                    <!-- 月份 -->
                    <span v-if="conclusionServiceInfo.taskType == 1">{{
                      `(${conclusionServiceInfo.year}年${conclusionServiceInfo.month}月)`
                    }}</span>
                    <!-- 季度 -->
                    <span v-else-if="conclusionServiceInfo.taskType == 2">{{
                      `(${conclusionServiceInfo.year}年第${conclusionServiceInfo.quarter}季度)`
                    }}</span>
                    <!-- 年度 -->
                    <span v-else-if="conclusionServiceInfo.taskType == 3">{{
                      `(${conclusionServiceInfo.year}年)`
                    }}</span>
                    <!-- 其他 -->
                    <span v-else-if="conclusionServiceInfo.taskType == 4">{{
                      `(${conclusionServiceInfo.other})`
                    }}</span>
                  </span>
                </view>
              </uni-section>
            </view>
          </uni-collapse-item>
          <uni-collapse-item title="结论性文件">
            <view class="content">
              <uni-section title="建筑消防设施保养结论表" type="circle">
                <view class="content-box" :style="{ flexDirection: item.direction || 'row' }"
                  v-for="(item, index) in conclusionTable" :key="index">
                  <span>{{ item.name }}:</span>
                  <span class="value" v-if="!item.type">{{
                    conclusionInfo[item.value] || "暂无"
                  }}</span>
                  <view class="checkbox" v-else-if="item.type == 'checkbox'">
                    <uni-data-checkbox multiple v-model="conclusionInfo[item.value]" disabled :localdata="deviceList"
                      :map="{ text: 'dictLabel', value: 'dictValue' }"></uni-data-checkbox>
                  </view>
                  <view class="multiple" v-else-if="item.type == 'multiple'">
                    <view class="multiple-box">
                      <view>建筑高度:</view><span class="num">{{
                        conclusionInfo.height || "暂无"
                      }}</span>
                      <view>建筑面积:</view><span class="num">{{
                        conclusionInfo.totalSize || "暂无"
                      }}</span>
                    </view>
                    <view class="multiple-box">
                      <view>层&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数:</view><span class="num">{{
                        conclusionInfo.layer || "暂无"
                      }}</span>
                      <view>使用性质:</view><span class="num">{{
                        conclusionInfo.buildUsePurpose || "暂无"
                      }}</span>
                    </view>
                  </view>
                </view>
              </uni-section>
            </view>
          </uni-collapse-item>
          <uni-collapse-item :title="`执业内容之${item.name}`" v-for="(item, index) in dataInfo.taskExecuteTrees"
            :key="index">
            <child-form :item="item.maintainTypeList[0].maintainTypeList"
              :name="item.maintainTypeList[0].name"></child-form>
          </uni-collapse-item>
        </uni-collapse>
      </uni-section>

      <uni-section title="审批操作" type="line">
        <view class="main-check">
          <span>审核结果:</span>
          <uni-data-checkbox v-model="radio" :localdata="auditStateList"
            :map="{ text: 'dictLabel', value: 'dictValue' }"></uni-data-checkbox>
        </view>
        <view class="main-check" style="flex-direction: column; align-items: flex-start">
          <span>审核意见:</span>
          <textarea placeholder-style="font-size: 26rpx" :value="opinion" @blur="bindTextAreaBlur" placeholder="请填写审核意见"
            style="
              height: 200rpx;
              border: 1rpx solid #ccc;
              width: 100%;
              padding: 10rpx;
              font-size: 28rpx;
            " />
        </view>
      </uni-section>
    </view>
    <view style="height: 88rpx"></view>
    <view class="main-btnList">
      <view class="main-btnList-btn" @click="submit"> 提交 </view>
      <view class="main-btnList-btn" style="background-color: #ffffff; color: #000" @click="close">
        返回
      </view>
    </view>
  </view>
</template>

<script>
import childForm from "./components/childForm.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    childForm,
  },
  data() {
    return {
      navOptions: {
        left: {
          icon: "back",
        },
        center: {
          title: "待审核报告详情",
        },
      },
      foundInfo: [
        {
          name: "项目名称",
          value: "projectName",
        },
        {
          name: "所属任务",
          value: "taskName",
        },
        {
          name: "报告编号",
          value: "reportCode",
        },
      ],
      // 服务对象
      serviceList: [
        {
          name: "建筑物(场所)名称",
          value: "name",
        },
        {
          name: "服务楼层(部位)",
          value: "detectionFloor",
        },
        {
          name: "服务面积(m²)",
          value: "totalSize",
        },
        {
          name: "建筑总层数",
          value: "layer",
        },
        {
          name: "火灾危险性",
          value: "maxFireRisk",
        },
        {
          name: "最大单体建筑面积(m²)",
          value: "areaSize",
        },
      ],
      // 维护保养结论
      conclusionList: [
        {
          name: "服务类型",
          value: "serviceTypeName",
        },
        {
          name: "报告类型",
          value: "taskTypeName",
          isFound: true,
        },
        {
          name: "维护保养摘要",
          value: "content",
        },
        {
          name: "维护保养日期",
          value: "date",
        },
        {
          name: "技术负责人",
          value: "technologyHeadName",
        },
        {
          name: "项目负责人",
          value: "projectHeadName",
        },
        {
          name: "执业人员",
          value: "staffName",
        },
      ],
      conclusionTable: [
        {
          name: "项目名称",
          value: "projectName",
        },
        {
          name: "项目地址",
          value: "projectAddress",
        },
        {
          name: "建筑消防设施列表",
          value: "values",
          type: "checkbox",
          direction: "column",
        },
        {
          name: "项目概况",
          value: null,
          type: "multiple",
          direction: "column",
        },
        {
          name: "本次维保情况简述及结论",
          value: "reportContent",
        },
        {
          name: "签发日期",
          value: "backDate",
        },
      ],

      // 设施列表
      deviceList: [],
      value: null,
      // 该项目版本，根据列表页中item项的version字段判断，当为1或null时代表是一期项目，为2时是二期项目
      version: null,
      processId: null,
      // 报告id
      reportId: null,
      // 详情数据
      dataInfo: null,
      // 结论性文件数据
      conclusionInfo: null,
      // 项目总表数据
      projectInfo: null,
      projectServiceInfo: null,
      // 维护保养结论数据
      conclusionServiceInfo: null,
      // 通过状态
      auditStateList: [],
      // 服务类型
      serviceTypeList: [],
      // 报告类型
      taskTypeList: [],

      show: false,
      // 审批结果
      radio: null,
      // 审核意见
      opinion: null,


      label: null,
    };
  },
  onLoad(option) {
    this.version = option.version;
    this.processId = option.processId;
    this.reportId = option.reportId;
    this.label = option.label
    this.init();
  },
  methods: {
    ...mapMutations(['unitTask', 'save_examine']),
    async init() {
      try {
        // let getZidian = this.getZidian("auditState", "auditStateList");
        await Promise.all([
          this.getFacilities(),
          this.getZidian("auditState", "auditStateList"),
          this.getZidian("service_type", "serviceTypeList"),
          this.getZidian("taskType", "taskTypeList"),
        ]);

        await Promise.all([
          // 获取表单详情
          this.getFormDetail(this.reportId),
          // 获取结论性文件
          this.getConclusionDetail(this.reportId),
          // 获取项目总表详情
          this.getProjectDetail(this.reportId),

          this.save_examine({ key: this.label, value: null })
        ]).then(() => {
          this.show = true;
        });
      } catch (error) { }
    },
    getFacilities() {
      return this.$store
        .dispatch("getFaciliList", this.version)
        .then(({ code, data, msg }) => {
          if (code == 200) {
            this.deviceList = data;
            return true;
          } else {
            uni.showToast({
              title: msg || "获取设施列表失败",
              icon: "error",
            });
          }
        });
    },
    getZidian(dictType, listName) {
      return this.$getDict(dictType).then((data) => {
        this[listName] = data;
        return true;
      });
    },
    bindTextAreaBlur(e) {
      this.opinion = e.detail.value;
    },
    getFormDetail(id) {
      return new Promise((resolve, reject) => {
        this.$store
          .dispatch("getFormDetail", {
            reportId: id,
          })
          .then(({ code, data, msg }) => {
            if (code == 200) {
              this.dataInfo = data;
              resolve(true);
            } else {
              uni.showToast({
                title: msg || "获取详情失败",
                icon: "error",
              });
            }
          });
      });
    },
    getConclusionDetail(id) {
      return this.$store
        .dispatch("getConclusionDetail", {
          reportId: id,
        })
        .then(({ code, data, msg }) => {
          if (code == 200) {
            this.conclusionInfo = data;
            this.$set(
              this.conclusionInfo,
              "values",
              data.value.split(",") || []
            );
            return true;
          } else {
            uni.showToast({
              title: msg || "获取结论报告失败",
              icon: "error",
            });
          }
        });
    },
    getProjectDetail(id) {
      return this.$store
        .dispatch("getProjectDetail", {
          reportId: id,
        })
        .then(({ code, data, msg }) => {
          if (code == 200) {
            this.projectInfo = data;
            // 设置维护保养日期
            let date = data.startDate
              ? data.startDate + " 至 " + data.endDate
              : "";
            this.$set(this.projectInfo, "date", date);
            this.projectServiceInfo = data.projectServeList[0] || null;
            // 设置建筑总层数
            let sum =
              Number(data.projectServeList[0].upLayer) +
              Number(data.projectServeList[0].lowLayer);
            this.$set(this.projectServiceInfo, "layer", sum);
            // 设置服务类型
            let serviceTypeIndex = this.serviceTypeList.findIndex(
              (item) => item.dictValue == this.projectInfo.serviceType
            );
            if (serviceTypeIndex != -1) {
              this.$set(
                this.projectInfo,
                "serviceTypeName",
                this.serviceTypeList[serviceTypeIndex].dictLabel
              );
            }
            this.conclusionServiceInfo = data.reportList[0] || null;
            // 设置报告类型
            let taskTypeIndex = this.taskTypeList.findIndex(
              (item) => item.dictValue == this.conclusionServiceInfo.taskType
            );
            if (serviceTypeIndex != -1) {
              this.$set(
                this.conclusionServiceInfo,
                "taskTypeName",
                this.taskTypeList[taskTypeIndex].dictLabel
              );
            }
            return true;
          } else {
            uni.showToast({
              title: msg || "获取结论报告失败",
              icon: "error",
            });
          }
        });
    },
    submit() {
      if (!this.radio) {
        uni.showToast({
          title: '请选择审核结果',
          icon: 'error'
        })
        return
      }
      if (!this.opinion && this.radio == 0) {
        uni.showToast({
          title: '请输入审核意见',
          icon: 'error'
        })
        return
      }
      let query = {
        processId: this.processId,
        message: this.opinion,
        approveStatus: this.radio,
      }
      this.$store.dispatch('putAuditProcess', query).then(({ code, data }) => {
        if (code == 200) {
          uni.showToast({
            title: '审核成功',
            icon: 'success'
          })
          this.close()
        } else {
          uni.showToast({
            title: '审核失败',
            icon: 'error'
          })
        }
      })
    },
    close() {
      uni.navigateBack({
        url: '/pages_workTableChild/reportView/unauditedIndex'
      })
    },
    change() { },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  background-color: #f4f5f5;

  &-content {
    min-height: calc(100vh - 80rpx);

    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      height: 50rpx;

      &-left {
        flex: 1;
        font-size: 26rpx;
      }

      &-right {
        flex: 2;
        text-align: right;
        font-size: 24rpx;
        color: #999;
      }
    }

    .content {
      padding: 0 20rpx 10rpx;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 28rpx;
        color: #000;
      }

      &-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 60rpx;

        .value {
          color: #999;
          max-width: 420rpx;
        }

        .multiple {
          display: flex;
          flex-direction: column;

          &-box {
            display: flex;
            flex-direction: row;
            align-items: center;

            .num {
              min-width: 200rpx;
              border-bottom: 1rpx solid #949494;
              color: #999;
            }
          }
        }
      }
    }
  }

  .main-check {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 5px;
  }

  &-btnList {
    height: 88rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 3;
    background-color: #fff;
    border-top: 1rpx solid #e5e5e5;
    width: 100%;

    &-btn {
      height: 66rpx;
      line-height: 66rpx;
      background-color: #335ac6;
      color: #fff;
      font-size: 26rpx;
      flex: 1;
      margin: 0 40rpx;
      text-align: center;
      border-radius: 45rpx;
      border: 1rpx solid #335ac6;
    }
  }
}

::v-deep .uni-section {
  margin-top: 0;
}

::v-deep .uni-section-header {
  padding: 24rpx 20rpx 10rpx;
}

::v-deep .uni-collapse-item__title-box {
  height: 60rpx;
  line-height: 60rpx;
}

::v-deep .uni-label-pointer {
  display: block;
}

::v-deep .uni-data-checklist .checklist-group {
  justify-content: flex-end;
}
</style>
